<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="addModalObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl">

        <div class="modal-title">
          <p>新增警员</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                警员编号：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="policeData.policeCode" class="modal-text f-l">
            </div>
            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                警员姓名：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="policeData.name" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                性别：
              </div>
              <select @change="selectGender" :value="policeData.gender">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <input type="text" v-model="stationName" readonly="readonly" @click="getStationTree" class="modal-text f-l" >
              <input type="hidden" v-model="policeData.stationId">
              <!--{{sectionTreeIShow}}-->
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionTree" class="ztree sectionTree-box"></div>
              </div>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                联系电话：
              </div>
              <input type="text" v-model="policeData.telephone" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员状态：
              </div>
              <select @change="selectStatus" :value="policeData.status">
                <option value="1">启用</option>
                <option value="0">禁用</option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                警员类型：
              </div>
              <select @change="selectPoliceType" :value="policeData.policeTypeId">
                <option value="-1">请选择</option>
                <option :value="itemPoliceType.id" v-for="itemPoliceType in policeType">
                  {{itemPoliceType.type}}
                </option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                职位：
              </div>
              <select @change="selectPolicePosition" :value="policeData.policePosition">
                <option value="-1">请选择</option>
                <option :value="itemPolicePosition.id" v-for="itemPolicePosition in policePosition">
                  {{itemPolicePosition.position}}
                </option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                办公电话：
              </div>
              <input type="text" placeholder="格式（01012345678）" v-model="policeData.officeTel" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                生日：
              </div>
              <div class="input-group date" id="date1">
                <span class="input-group-addon glyphicon glyphicon-list"><i class="fa fa-calendar"></i></span>
                <input type="hidden" ref="birthday"  name="birthday">
                <input type="text" readonly="readonly" ref="birthday" id="datetimepicker" class="form-control" required="required" data-date-format="dd-mm-yyyy">
              </div>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                排序：
              </div>
              <input type="text" maxlength="4" placeholder="最长4位字符" v-model="policeData.sort" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                是否为领导：
              </div>
              <select @change="selectIsLeader" :value="policeData.isLeader">
                <option value="-1">请选择</option>
                <option value="0">否</option>
                <option value="1">是</option>
              </select>
            </div>

            <div class="modal-row photo" style="display: block">
              <div class="modal-form-key f-l">
                警员相片：
              </div>
              <div class="photo-up-btn f-l">
                <input type="file" name="photo" ref="formFile" @change="filePhoto" class="modal-text f-l">
                <span class="photo-btn">选择相片</span>
                <input type="hidden" name="photoId" v-model="policeData.pictureUrl">
              </div>
              <button type="button" :disabled="subImgDls" class="btn btn-info f-l" @click="bindPhoto" v-show="photoSrc!==''">上传</button>
              <button type="button" class="btn btn-info f-l" @click="clearPhoto" v-show="photoSrc!==''">清除</button>
              <img :src="photoSrc" class="f-l photo-img" alt="">
            </div>

          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeModal">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "AddPoliceModal",
        props:["addModalObj"],
        data(){
          return{
            //警员信息
            policeData:{
              policeCode:"", //警员编号
              name:"", //姓名
              gender:"男", //性别
              stationId:"", //部门id
              telephone:"", //联系电话
              status:"1", //状态
              policeTypeId:"-1", //警员类型id
              policePosition:"-1", //警员职位id
              officeTel:"", //办公电话
              birthday:"", //生日
              sort:"", //排序
              isTest:"0", //是否测试员
              pictureUrl:"", //警员相片
              isLeader:"-1", //是否为领导
            },
            photoSrc:"",
            photoFile:"",
            stationName:"",
            subImgDls:false,
            //缓存信息
            getSessionStorage:{},
            policeType:[],
            policePosition:[],
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            sectionTreeIShow:false
          }
        },
        mounted(){
          let _this = this;
          this.setting.callback = {
            onClick:function(event,treeId,treeNode){ //新增警员部门树选择
              //console.log(treeNode);
              _this.stationName = treeNode.name;
              _this.policeData.stationId = treeNode.id;
              _this.sectionTreeIShow = false;
            }
          };
        },
        created(){
          //日期控件
          let _this = this;
          $(function () {
            //console.log($("#datetimepicker"));
            $('#date1').datetimepicker({
              language: "zh-CN",
              format: "yyyy-mm-dd",
              minView: "month",
              autoclose: true
            }).on("changeDate",function(ev){
              //console.log();
              let selectDate = ev.date.valueOf();
              let theDate = new Date().getTime(); //当前时间
              if( selectDate >= theDate ){
                _this.s_alert("选择时间不能是未来时间！");
                // alert("选择时间不能是未来时间！");
                $(".form-control").val("");
                $(".form-control").prev().val("");
              }
            });
          });
        },
        watch:{
          addModalObj:{
            handler(v1){
              //设置缓存
              this.getSessionStorage = JSON.parse(sessionStorage.getItem("stationCommunication"));
              //console.log(this.getSessionStorage);
              //部门名称
              this.stationName = this.getSessionStorage.name;
              //部门id
              this.policeData.stationId = this.getSessionStorage.id;
              //警员类型列表
              this.policeTypeFn();
              //警员岗位列表
              this.policePositionFn();
              //console.log(v1);
              if( v1.isShow === true ){ //监听弹窗变化。
                let session = JSON.parse(sessionStorage.getItem("stationCommunication"));
                this.getSessionStorage.name = session.name;
                this.getSessionStorage.id = session.id;
                this.policeData.stationId = this.getSessionStorage.id;
                this.stationName = this.getSessionStorage.name;
                //console.log(session);
              }
            },
            deep:true
          }
        },
        methods:{
          //警员相片
          filePhoto(ele){
            this.photoFile = ele.target.files[0];
            if( this.photoFile.type ){
              let imgTypeArr = this.photoFile.type.split("/");
              let imgType = imgTypeArr[imgTypeArr.length-1];
              //console.log(imgType);
              if( this.verifyForm.isImg(imgType) ){
                this.photoSrc = window.URL.createObjectURL(this.photoFile);
                this.subImgDls = false;
              }else{
                this.s_alert("选择的不是图片文件！");
                this.photoSrc = "";
                this.$refs.formFile.value = "";
              }
            }else{
              this.s_alert("选择的不是图片文件！");
            }
          },
          //清除相片
          clearPhoto(){
            this.photoSrc = "";
            this.policeData.pictureUrl = "";
            this.$refs.formFile.value = "";
          },
          //绑定相片
          bindPhoto(){
            //jp-TIFS-FileCenter-ms/file?businessId=
            this.subImgDls = true;
            let param = new FormData();
            param.append('file',this.photoFile);//通过append向form对象添加数据
            //console.log(this.photoFile);
            let configFile = {
              headers:{'Content-Type':'multipart/form-data'}
            };
            this.$axios.post(baseURL+"api/jp-TIFS-FileCenter-ms/file",param,configFile)
              .then((data)=>{
                this.s_alert("上传成功！");
                // alert("上传成功！");
                //console.log(data.data.fileID);
                this.policeData.pictureUrl = data.data.fileID;
              })
              .catch((err)=>{
                this.s_alert("上传失败！");
                // alert("上传失败！");
                //console.log(err);
              });
          },
          //提交
          subBtn(){
            let params = {};
            for( let policeKey in this.policeData ){
              params[policeKey] = this.policeData[policeKey];
            }
            params.birthday = this.$refs.birthday.value;
            params.birthday ? params.birthday = params.birthday+"T02:09:17.245+05:30":"";
            //console.log(params);

            if( this.verifyForm.isNull(params.name) ){
              this.s_alert("警员姓名不能为空！");
              // alert("警员姓名不能为空！");
              return false;
            }else if( this.verifyForm.isNull(params.policeCode) || this.verifyForm.letterAndNumber(params.policeCode) ){
              this.s_alert("警员编号为空或格式不正确！只能输入字母与数字！");
              // alert("警员编号不能为空！");
              return false;
            }else if( this.verifyForm.isNull(params.policePosition) ){
              this.s_alert("职位不能为空！");
              // alert("警员职位不能为空！");
              return false;
            }else if( this.verifyForm.isNull(params.policeTypeId) ){
              this.s_alert("警员类型不能为空！");
              // alert("警员类型不能为空！");
              return false;
            }else if( this.verifyForm.isNull(params.stationId) ){
              this.s_alert("所属单位不能为空！");
              // alert("所属单位不能为空！");
              return false;
            }else if( this.verifyForm.iphone(params.telephone) ){
              this.s_alert("联系电话格式不正确！");
              // alert("联系电话格式不正确！");
              return false;
            }else if( this.verifyForm.isIphoneOrTell(params.officeTel) ){
              this.s_alert("办公电话格式不正确！");
              // alert("办公电话格式不正确！");
              return false;
            }else if( this.verifyForm.isNull(params.isLeader) ){
              this.s_alert("请选择是否为领导！");
              // alert("请选择是否为领导！");
              return false;
            }else if( this.verifyForm.isNumber(params.sort) ){
              this.s_alert("排序字段只能为整数！");
              // alert("请选择是否为领导！");
              return false;
            }
            this.$axios.post(this.HOST+"/user/insertPoliceInfoAndUser",params)
              .then((data)=>{
                if( data.data.success === true ){
                  this.s_alert("新增成功！");
                  // alert("新增成功！");
                  this.closeModal();
                  this.s_logwrite("基础信息管理-警员管理","新增警员");
                  this.initAddPoliceData();//清除警员缓存信息
                  this.$emit("newPoliceSucceed");//刷新页面
                }else{
                  let msg = data.data.errorMsg.split("[");
                  this.s_alert(msg[0]);
                  // alert(msg[0]);
                }
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //关闭树
          //警员类型列表
          policeTypeFn(){
            this.$axios.get(this.HOST+"/police/getAllPoliceType")
              .then((data)=>{
                this.policeType = data.data;
                //console.log(this.policeType);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //警员岗位列表
          policePositionFn(){
            this.$axios.get(this.HOST+"/police/getAllPolicePosition")
              .then((data)=>{
                this.policePosition = data.data;
                //console.log(this.policePosition);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //性别选择
          selectGender(ele){
            this.policeData.gender = ele.target.value;
            //console.log(ele.target.value);
          },
          //警员状态选择
          selectStatus(ele){
            this.policeData.status = ele.target.value;
            ////console.log(ele.target.value);
          },
          //是否为领导
          selectIsLeader(ele){
            this.policeData.isLeader = ele.target.value;
          },
          //警员类型选择
          selectPoliceType(ele){
            this.policeData.policeTypeId = ele.target.value;
            ////console.log(ele.target.value);
          },
          //警员职位选择
          selectPolicePosition(ele){
            this.policeData.policePosition = ele.target.value;
            ////console.log(ele.target.value);
          },
          //是否测试员选择
          selectIsTest(ele){
            this.policeData.isTest = ele.target.value;
            ////console.log(ele.target.value);
          },
          //获取部门树
          getStationTree(){
            this.sectionTreeIShow = !this.sectionTreeIShow;
            if( this.sectionTreeIShow ){
              this.$axios.get(this.HOST+'/station/getOrgaInfo',this.getSessionStorage.id)
                .then((data)=>{
                  $.fn.zTree.init($("#sectionTree"), this.setting, data.data.data);
                  //console.log(data);
                })
                .catch((err)=>{
                  //console.log(err);
                })
            }
          },
          //关闭模态窗
          closeModal(){
            this.$emit("closeModalAddPolice");
            this.initAddPoliceData();
          },
          //清除新增警员缓存
          initAddPoliceData(){
            this.policeData={
              policeCode:"", //警员编号
              name:"", //姓名
              gender:"男", //性别
              stationId:"", //部门id
              telephone:"", //联系电话
              status:"1", //状态
              policeTypeId:"-1", //警员类型id
              policePosition:"-1", //警员职位id
              officeTel:"", //办公电话
              birthday:"", //生日
              sort:"", //排序
              isTest:"0", //是否测试员
              pictureUrl:"", //警员相片
              isLeader:"-1", //是否领导
            };
            this.$refs.formFile.value = "";
            this.$refs.birthday.value = "";
            this.photoSrc = "";
            this.subImgDls = false;
            this.sectionTreeIShow = false;
          }
        }
    }
</script>

<style scoped>
  .sectionTree-box{
    position: absolute;
    z-index: 99;
    padding: 10px;
    right: 0;
    width: 60%;
    top: 30px;
    height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(51,51,51,0.2);
  }
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
